<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平均贸易强度及度中心性</title>
    <link rel="stylesheet" href="/css/table1.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/map/js/china.js"></script>
    <link rel="icon" type="image/x-icon" href="software.png"/>
</head>
<body>
    <div class="header">
        <div class="logo">
            <img src="software.png" width="auto" height="90">
        </div>
        <nav>
            <ul>
                <li><a href="index.html">MAP</a></li>
                <li><a href="TABLE.html">TABLE</a></li>
                <li><a href="gouwuche.html">SERVICE</a></li>
                <li><a href="MAP.html">HELP</a></li>
            </ul>
        </nav>
        <div class="language">
            <span>CN</span>EN
        </div>
    </div>
    <div style="display: flex; flex-wrap: nowrap;">
        <div class="tablebox" id="main" style="width: 1000px;height:800px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            // 平均贸易强度表
            var option1 = {
                title: {
                    text: '平均强度及度中心性',
                    textStyle: {
                        fontSize: 30 // 更改为您所需的字体大小
                    }
                },
                tooltip: {},
                legend: {
                    data: ['强度指数', '中心性指数'],
                    textStyle: {
                        fontSize: 20 // 更改为您所需的字体大小
                    }
                },
                xAxis: {
                    data: ["2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019"],
                    lineStyle: {
                        width: 31 // 设置x轴线的宽度
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '强度指数',
                        min: 1
                    },
                    {
                        type: 'value',
                        name: '中心性指数',
                        min: 30
                    },
                ],
                series: [{
                    name: '强度指数',
                    type: 'line',
                    data: [2.32, 2.2, 2.24, 2.23, 1.92, 1.74, 1.82, 1.95, 1.87],
                    symbolSize: 17, // 控制数据点的大小
                    lineStyle: {
                        width: 3,
                        shadowColor: 'rgba(0,0,0,0.3)',
                        shadowBlur: 10,
                        shadowOffsetY: 8
                    },
                },
                {
                    name: '中心性指数',
                    type: 'line',
                    data: [47.5, 49.4, 49.7, 52.1, 54.9, 56.5, 53.9, 54.2, 57],
                    symbolSize: 17, // 控制数据点的大小
                    lineStyle: {
                        width: 3,
                        shadowColor: 'rgba(0,0,0,0.3)',
                        shadowBlur: 10,
                        shadowOffsetY: 8
                    },
                    yAxisIndex: 1,
                }
                ]
            };
            function toggleChart(index) {
                if (index === 0) {
                    myChart.setOption(option1);
                } else if (index === 1) {
                    myChart.setOption(option2);
                }
            }
            toggleChart(0)
        </script>
        <div class="analyse" style="width: 600px;height: 400px;margin-top: 100px;">
            <select id="contentSelector" style="width: 200px;height: 40px;">
                <option value="p1">节点平均强度分析</option>
                <option value="p2">度中心性演化分析</option>
                <option value="p3">平均强度和度中心性的对比分析</option>
            </select>
                <article>
                    <div class="part2">
                        <div class="text">
                            <h3><a href="">ANALYSE 👋🏾</a></h3>
                            <div class="p1">
                            <p class="custom-paragraph">节点平均强度，是指IFTN中节点与其他节点的平均贸易额，该指标反映了国际粮食贸易的活力。IFTN节点平均强度演化如图3.3所示，2011年至2019年间的国际粮食贸易活力呈现总体下行趋势，特别是从2014年开始，IFTN的节点平均强度呈现断崖式下跌，这说明国际粮食贸易活力在这一年开始走向低迷。据联合国粮农组织的统计，该年度国际粮食贸易活力呈现下行趋势的主要原因是世界各国对小麦和粗谷物（主要是玉米）进口量的大幅减少，而其背后的诱导因素可能是俄罗斯联邦和乌克兰两个世界粮食出口大国之间爆发的冲突；2015年至2016年，由于国际反恐形势严峻，新的地区冲突不断产生，伊朗、土耳其等阿拉伯国家进口小麦的贸易额大幅减小，同时由于中国饲料谷物的良好收成，其对大麦和高粱的采购量大幅降低，一些第三世界国家对玉米的需求也有所降低，使得粗谷物的贸易额也呈现走低趋势；2016年至2017年，有利的气候条件致使全球粗谷物产量升高，IFTN节点平均强度小幅上升；2017年按吨重计算的全球粮食贸易量与2016年基本持平，但由于国际粮价出现较大幅度的上涨趋势，IFTN节点平均强度在该年度出现了不容忽视的增长；2018年至2019年以来，由于中美贸易摩擦的剧烈化，粮食贸易大国之间的贸易壁垒不断加强，世界经贸关系复杂多变，地缘政治风险积聚，导致粮食市场供求略紧。与此同时，在2019年，国际粮食价格也出现波动，总体水平低于上年。以上一系列因素导致2019年IFTN节点平均强度小幅降低。 </p>
                        </div>
                        <div class="p2" style="display: none;">
                            <p class="custom-paragraph">度中心性是衡量节点重要性的一种指标，本研究采用节点的平均度中心性，反映平均每个节点所拥有的粮食贸易伙伴数量，可以用于度量参与国际粮食贸易的国家贸易伙伴的多元化水平。IFTN节点平均度中心性总体呈上升趋势，这表明2011年至2019年，各国家的粮食贸易伙伴趋于多元化，反映了粮食贸易全球化进程仍然方兴未艾的局面。节点平均度中心性在2014年至2015年间上升速度最快，原因是2013年至2014年间，小麦和粗谷物（主要是玉米）产量暴增，带动了全世界粮食产量的大幅增长；2015年气候变化对玉米产量造成了一定影响，但世界粮食产量总体上仍可满足全球利用需求；2016年由于作物在第四季度的生长条件较为有利，全球粮食产量进一步提升；在此后的2017年，网络的节点平均度中心性出现较大降幅；经过一年的短暂平稳期，到2019年，又重新呈现大幅上升趋势，且创造了九年来的最高记录</p>
                        </div>
                        <div class="p3" style="display: none;">
                            <p class="custom-paragraph">对比IFTN节点平均强度演化和IFTN节点平均度中心性演化，可以得出以下结论：1）贸易伙伴的多元化并不意味着贸易活力的增强和贸易壁垒影响力的削弱，反之亦然；2）受粮食产量变化、国际大事件等各种因素的影响，节点平均度中心性和节点平均强度的变化方向和变化幅度均不一定相同；3）节点平均度中心性和节点平均强度在时间序列上呈现出相似的变化趋势，但前者的变化要比后者的变化延迟1-2年，且变化幅度不相同。这个延迟关系对预测未来IFTN形态结构的变化具有一定的参考价值。</p>
                        </div>
                        </div>
                    </div>
                </article>
        </div>
    </div>
    <script type="text/javascript">
        // 设置初始显示为 p1
        document.querySelector('.p1').style.display = 'block';
    
        var contentSelector = document.getElementById('contentSelector');
        contentSelector.addEventListener('change', function() {
            var selectedContent = contentSelector.value;
            var paragraphs = document.querySelectorAll('.text > div');
            for (var i = 0; i < paragraphs.length; i++) {
                if (paragraphs[i].classList.contains(selectedContent)) {
                    paragraphs[i].style.display = 'block';
                } else {
                    paragraphs[i].style.display = 'none';
                }
            }
        });
    </script>
</body>